import React, { Component } from 'react';
import axios from 'axios'

class Product extends Component {


  constructor() {
    super()
    this.state = {
      list: [],
      total:0
    }
  }

  sum(){
    let total = this.state.list.reduce((total,item)=>{
      return total += item.sc
    },0)
    this.setState({
      total
    })
  }

  render() {
    return (
      <div >
        <ul>
          {
            this.state.list.map((item)=>{
            return <li key={item.id}>{item.nm}</li>
            })
          }
        </ul>
        <hr/>
        总分：{this.state.total}
      </div>
    );
  }

  componentDidMount() {
    axios.get('http://localhost:3000/datalist').then((result) => {
      console.log(result);
      this.setState({
        list:result.data
      })
      this.sum();
    })
  }
}
export default Product;